<template>
	<view>
		<view class="recent">
			<view class="cardInfo_wrapper">
				<view class="cardInfo">
					<img src="../../static/头像.jpg" alt="无头像喵" mode="widthFix" class="avatar"/>
				</view>
			</view>
		</view>
		<view class="tabbar">
		      <view
		        class="tabbar-item"
		        :class="{ active: currentTab === 'day' }"
		        @click="currentTab = 'day'"
		      >
		        日
		      </view>
		      <view
		        class="tabbar-item"
		        :class="{ active: currentTab === 'month' }"
		        @click="currentTab = 'month'"
		      >
		        月
		      </view>
		      <view
		        class="tabbar-item"
		        :class="{ active: currentTab === 'year' }"
		        @click="currentTab = 'year'"
		      >
		        年
		      </view>
		</view>
		<view>
		      <view v-if="currentTab === 'day'">
		        {{ new Date().getDate() }}日
		        
				<view style="display: flex; justify-content: center; flex-wrap: wrap;">
				  <view style="display: flex; align-items: center; margin: 10px;">
				    <text style="margin-left: 10px;">10积分</text>
					<img src="../../static/左箭头.jpg" style="width: 25px; height: 25px;" />
				    <img src="../../static/OIP.jpg" style="width: 25px; height: 25px;" alt="star icon; display: flex; justify-content: center; flex-wrap: wrap;"/>
				    <img src="../../static/右箭头.jpg" style="width: 25px; height: 25px;" />
					<text style="margin-left: 10px;">数学 - 做计算</text>
				  </view>
				  <view style="display: flex; align-items: center; margin: 10px;">
				    <text style="margin-left: 10px;">20积分</text>
				    <img src="../../static/左箭头.jpg" style="width: 25px; height: 25px;" />
					<img src="../../static/OIP.jpg" style="width: 25px; height: 25px;" />
				    <img src="../../static/右箭头.jpg" style="width: 25px; height: 25px;" />
					<text style="margin-left: 10px;">英语 - 写作文</text>
				  </view>
				</view>
		      </view>
		      <view v-if="currentTab === 'month'">
				  
		        {{ new Date().getMonth() + 1 }}月
		      </view>
		      <view v-if="currentTab === 'year'">
				  
		        {{ new Date().getFullYear() }}年
		      </view>
		    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 'day'
			}
		},
		methods: {
			
		}
	}
</script>

<style>
    @import url("recent.css");
</style>
